<template>
	<view class="my-nav">
		<!-- 整个视口的背景色/背景图片 -->
		<view class="bg-box" v-if="bg_show">
			<image v-if="img_show" class="bg" mode=widthFix src="/static/image/common/nav_bg.png"></image>
		</view>

		<!-- 带返回图标的状态栏容器 -->
		<view class="status-bar2" :style="statusBarStyle" v-if="is_return">
			<view class="return" @click="navBack">
				<image src="@/static/image/common/back_icon.png" mode=""></image>
			</view>
			<slot></slot>
			<view class="return">
				<image src="@/static/image/common/back_icon.png" mode="" style="opacity: 0;"></image>
			</view>
		</view>

		<!-- 自定义的状态栏容器 -->
		<view v-else class="status-bar1" :style="statusBarStyle">
			<slot></slot>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';
	import appSite from '@/utils/appSite.js'


	const props = defineProps({
		//是否显示视口大小的背景色
		bg_show: {
			type: Boolean,
			default: true
		},
		//在视口大小背景色存在的情况下， 是否显示背景图片
		img_show: {
			type: Boolean,
			default: true
		},
		//是否使用带返回图标的 status_bar 容器
		is_return: {
			type: Boolean,
			default: false
		}
	})

	const statusBarStyle = computed(() => {
		const statusBarHeight = uni.getStorageSync('statusBarHeight');
		const navHeightv = appSite.navHeight;
		return {
			height: (statusBarHeight + navHeightv) + 'px',
			paddingTop: statusBarHeight + 'px'
		}
	})

	//返回
	function navBack() {
		uni.navigateBack({
			delta: 1
		})
	}
	
	
	import storage from "@/utils/storage.js";
	import eventBus from 'small-event-bus';
	
	//TODO 模拟登入权限校验, 具体开发中，通过页面掉接口
	const tokenAccess = storage.getTokenAccess();
	if (!tokenAccess) {
		eventBus.public('authenticationFail', {
			code: 404,
			msg: "请登入"
		});
	}
</script>



<style scoped lang="less">
	.my-nav {
		width: 100vw;
		box-sizing: border-box;
		color: #000000;
		font-size: 32rpx;
		text-align: center;
		font-weight: 500;
		position: relative;

		//整个视口高度的背景色
		.bg-box {
			width: 100vw;
			height: 100vh;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			background: #151419;

			.bg {
				width: 100vw;
			}
		}

		.status-bar2 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			text-align: center;
			box-sizing: border-box;
			padding-top: var(--status-bar-height);
			position: relative;
			z-index: 1;
			color: #fff;

			.return {
				padding-left: 40rpx;
				padding-right: 20rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 22rpx;
					height: 36rpx;
				}
			}

			.title {
				text-align: center;
			}
		}

		.status-bar1 {
			display: flex;
			align-items: center;
			width: 100%;
			text-align: center;
			box-sizing: border-box;
			padding-top: var(--status-bar-height);
			position: relative;
			z-index: 1;
		}



	}
</style>